<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>北极光之夜。</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.kuang {
			position: relative;
			height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: rgb(5, 5, 5);
			filter: contrast(30);/*调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1*/
		}
		.droplet {
			position: absolute;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: rgb(61, 233, 99);
			filter: blur(20px);/*给图像设置模糊*/
			animation: fall 3s linear infinite;
			opacity: 0;
		}
		/*第2和和第3个水滴延迟时间后再播放动画*/
		.kuang div:nth-of-type(2) {
			animation-delay: 1.5s;
		}
		.kuang div:nth-of-type(3) {
			animation-delay: 2s;
		}
		/*给水滴设置动画，让它们从上往下落下，期间大小发生变化*/
		@keyframes fall {
			0% {
				opacity: 0;
				transform: scale(0.8) translateY(-500%);
			}
			50% {
				opacity: 1;
				transform: scale(0.5) translateY(-100%);
			}
			100% {
				transform: scale(0.3) translateY(0px);
			}
		}
		.quan {
			position: absolute;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: rgb(61, 233, 99);
			filter: blur(20px);
			animation: zhuan 3s infinite;
		}
		/*给显示数字的圆圈动画效果，让它转起来*/
		@keyframes zhuan {
			0% {
				transform: scale(1) rotate(0deg);
			}
			50% {
				transform: scale(1.1) rotate(180deg);
				height: 90px;
				border-top-left-radius: 45%;
				border-bottom-left-radius: 48%;
				
			}
			100% {
				transform: scale(1) rotate(360deg);
			}
		}
		span {
			position: absolute;
			color: rgb(184, 182, 182);
			font-size: 26px;
			font-family: 'fangsong';
			font-weight: bold;
		}
	</style>
</head>
<body>
	<!--有三个水滴盒子，一个圆圈盒子显示数字，一个最底层盒子-->
	<div class="kuang">
		<div class="droplet"></div>
		<div class="droplet"></div>
		<div class="droplet"></div>
		<div class="quan"></div>
		<span>99%</span>
	</div>
</body>
</html>
